<template>
  <el-container>
    <div class="topBox add_btn_top">
      <div class="switch-text" :style="{ color: switchTextColor }">
        {{ switchText }}
      </div>
      <el-switch active-color="#2680D2" class="screenSwitch" v-model="screen">
      </el-switch>
      <div class="line"></div>
      <el-button type="primary" class="addButton" size="mini" @click="openadd"
        ><i class="el-icon-plus"></i>添加
      </el-button>
    </div>
    <el-main style="padding: 20px; background: #fff">
      <div v-init-screen-h>
        <div v-if="boxList && boxList.length > 0">
          <el-row :gutter="20">
            <el-col
              :xs="24"
              :sm="12"
              :md="12"
              :lg="6"
              :xl="6"
              v-for="(item, index) in boxList"
              :key="index"
              class="mb_sm"
            >
              <ImgTitleContent
                descriptionKey="ip"
                timeKey="model"
                @handleClose="handleClose(item.token)"
                :isCloseIcon="true"
                :item="item"
                @handNavTo="ToDetails(item.token)"
              ></ImgTitleContent>
            </el-col>
          </el-row>
        </div>
        <empty-data v-if="boxList && boxList.length == 0"> </empty-data>
      </div>
      <Pagination
        @pagination="pagination"
        :total="total"
        :page="pageNum"
        :limit="pageSize"
        :pageSizes="pageSizes"
      />
    </el-main>
    <el-aside
      style="background: #fff; padding: 10px; margin-left: 10px"
      width="18%"
      v-show="screen"
    >
      <Search @setFilterList="setFilterList"></Search>
    </el-aside>
    <Dialog :show.sync="showDialog" @closeDialog="closeDialog"></Dialog>
  </el-container>
</template>

<script>
import Pagination from "@/views/common/page";
import Dialog from "./components/Dialog.vue";
import ImgTitleContent from "@/components/ImgTitleContent";
import { getList, delToken } from "@/api/loudspeakerBox";
import Search from "./components/Search.vue";
import emptyData from "@/views/common/emptyData";
export default {
  components: {
    Pagination,
    ImgTitleContent,
    emptyData,
    Search,
    Dialog,
  },
  data() {
    return {
      showDialog: false,
      switchTextColor: "#666666",
      switchText: "显示筛选",
      boxList: [],
      screen: false,
      pageNum: 1,
      pageSize: 20,
      pageSizes: [20, 50, 100, 300],
      total: 0,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    ToDetails(token) {
      this.$router.push({
        name: "loudspeakerBoxDetails",
        query: {
          token,
        },
      });
    },
    // 删除
    handleClose(token) {
      this.$confirm("是否确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delToken(token).then((res) => {
            this.$msg({
              type: "success",
              message: "删除成功!",
            });
            this.init();
          });
        })
        .catch((err) => {});
    },
    closeDialog(isRefresh) {
      console.log("11123 :>> ", 11123);
      if (isRefresh) {
        this.init();
      }
    },
    //筛选调用
    setFilterList(data) {
      if (data) {
        this.switchTextColor = "#2680D2";
        this.switchText = "显示筛选 ( 已筛选 )";
      } else {
        this.switchTextColor = "#666666";
        this.switchText = "显示筛选";
      }
      this.init(data ? data : {});
    },
    openadd() {
      this.showDialog = true;
    },
    async init(data) {
      const res = await getList({
        page: this.pageNum,
        pageSize: this.pageSize,
        ...data,
      });
      this.boxList = res.data.results;
      this.total = res.data.numResults;
    },
    pagination({ page, limit }) {
      this.pageNum = page;
      this.pageSize = limit;
      this.init();
    },
  },
};
</script>

<style lang="scss" scoped>
</style>